<template>
  <div class="dinetime-wrapper">
    <div class="serach-wrapper">
      <Input v-model="shop_id" placeholder="请输入店铺ID" style="width: 300px"></Input>
      <Button   @click="getList">开始抓取</Button>
      <Button>暂停</Button>
    </div>
    <div class="data-wrapper">
      <Table border :columns="columns5" :data="data"></Table>
      <Label v-if="shop_id" class="desc">店铺ID:{{shop_id}}用餐时间分析</Label>
      <Spin fix v-if="loading">
          <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
          <div>Loading</div>
      </Spin>
      <ve-pie v-if="shop_id" :data="chartData" :settings="chartSettings"></ve-pie>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      shop_id: '',
      loading:false,
      columns5: [
        {
          title: '店铺id',
          key: 'shopId',
          sortable: true
        },
        {
          title: '早餐评论数',
          key: 'breakfastCommentCount'
        },
        {
          title: '午餐评论数',
          key: 'lunchCommentCount',
          sortable: true
        },
        {
          title: '下午茶评论数',
          key: 'pmTeaCommentCount'
        },
        {
          title: '晚餐评论数',
          key: 'dinerCommentCount'
        },
        {
          title: '宵夜评论数',
          key: 'nightCommentCount'
        }
      ],
      data: [
         
      ],
      chartData: {
        columns: ['title','value'],
        rows: [
          { 'title': '早餐评论数', 'value': 3 },
          { 'title': '午餐评论数', 'value': 6 },
          { 'title': '下午茶评论数', 'value': 90 },
          { 'title': '晚餐评论数',  'value': 12 },
          { 'title': '宵夜评论数',  'value': 15 }
        ]
      },
      chartSettings:{
        dimension: 'title',
        metrics: 'value'
      }
    }
  },
  methods:{
    getList(){
      let that = this
      that.loading = true;
      console.log('startGet')
      let url = this.shop_id?`http://127.0.0.1:7001/analysis/dineTime?shopid=${this.shop_id}`:`http://127.0.0.1:7001/analysis/dineTime`;
      axios.get(url)
      .then(function (response) {
        that.data = response.data.data;
        that.loading = false;
        if (that.shop_id && that.data.length > 0) {
          console.log(that.data)
          that.chartData.rows[0].value = that.data[0].breakfastCommentCount;
          that.chartData.rows[1].value = that.data[0].lunchCommentCount;
          that.chartData.rows[2].value = that.data[0].pmTeaCommentCount;
          that.chartData.rows[3].value = that.data[0].dinerCommentCount;
          that.chartData.rows[4].value = that.data[0].nightCommentCount;
        }
      })
      .catch(function (error) {
        console.log(error);
      }); 
    }
  },
  created(){ 
  }
}
</script>

<style>
  .dinetime-wrapper{
    padding: 20px; 
  }
  .serach-wrapper{
    padding-bottom: 20px;
  }
  .data-wrapper{
    padding-top: 20px;
  }
  .desc{
    font-size: 40px;
  }
</style>
